Side sheets Guidelines 側邊彈出層指導規則
Usage 用法
標準側邊欄主要用於平板電腦和桌面裝置等大尺寸視窗,提供一致且可預測的補充介面。
側邊欄內容補充主螢幕內容,並在使用者互動時保持可見。
常見用途包括:
- 顯示影響主要內容的操作,如篩選器
- 顯示補充內容和功能

模態側邊欄適用於移動裝置等緊湊視窗。它可顯示標準側邊欄的內容,但需關閉後才能與底層內容互動。

側邊欄寬度固定,一般會佔滿整個螢幕高度,其具體大小由應用程式的介面佈局決定。
Anatomy 結構


Container 容器
側邊欄容器承載所有元素,大小根據內容自適應。容器為必需元素,其他均為可選。

Close (optional) 關閉(可選)
圖示按鈕可退出側邊欄或切換介面。由於主要內容始終可見,需提供返回主介面的明確操作方式。

Buttons (optional) 按鈕(可選)
按鈕代表側邊欄中可用的操作,可能包括儲存、編輯或下載。使用陰影、填充和色調來突出特定操作。

Divider (optional) 分隔線(可選)
分隔線用於區分不同型別的內容及區域,可用來分隔操作與內容,或使用者生成與系統生成的內容。

Content (optional) 內容(可選)
側邊欄可以顯示各種各樣的內容和佈局,從操作列表到表格佈局中的補充內容。

Responsive layout 響應式佈局
側邊欄有一個基本寬度,但可以按需調整。當你開啟標準側邊欄時,主要內容區域會自動變窄,給側邊欄留出空間,同時保持內容右側的邊距不變。
RTL language support 從右至左語言支援
在從右至左(RTL)語言環境中,側邊欄應出現在視窗的左邊緣,所有元素方向相反。

Behavior 行為
側邊欄可以獨立於介面的其他部分進行垂直滾動。這使得在頁面滾動時,其滾動位置和內容能夠保持不變,反之亦然。側邊欄不能水平滾動。
Back 返回
在安卓系統上,有一種名為預測返回的手勢,允許使用者在側邊欄上向左或向右滑動。
側邊欄從螢幕的頂部和底部邊緣分離,以表明它將關閉。上一螢幕以預覽形式顯示。側邊欄及其內容始終會按照使用者手勢的方向進行縮放。
Interaction & style 互動與樣式
設計規範要求側邊欄內始終要有關閉功能。




